::-ms-clear, ::-ms-reveal {
    display: none
}

::-moz-placeholder {
    color: #999
}

::-webkit-input-placeholder {
    color: #999
}

:-ms-input-placeholder {
    color: #999
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .23)
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .35)
}

::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, .45)
}

::-webkit-scrollbar-corner {
    background-color: transparent
}

body {
    font-family: Microsoft YaHei, SimSun;
    background: #f7f7f9;
    color: #333
}


.link-item a img {
    border: 0;
    width: 20px;
    height: 20px;
    float: left;
    display:block;
    margin-bottom: 40px;
    margin-right: 10px;
}

* {
    padding: 0;
    margin: 0
}

.link-item{
    background-color: #fff;
    display:inline-block;
    vertical-align:top;
    width: 150px;
    height: 70px;
    margin-bottom: 10px;
    margin-right: 30px;
    border-radius:10px;
    -moz-border-radius:10px; /* 老的 Firefox */
    box-shadow: 7px 5px 10px -7px rgba(0,0,0,0.34);
    -webkit-box-shadow: 7px 5px 10px -7px rgba(0,0,0,0.34);
    -moz-box-shadow: 7px 5px 10px -7px rgba(0,0,0,0.34);
}
.link-title{
    font-weight:bold;
    display: inline-block;
}
.link-desc{
    display: block;
    font-size: small;
    color: #6d6d6d;
}
.widget-title{
    margin-top: 20px;
    margin-bottom: 10px;
}

a, a:visited {
    text-decoration: none;
    color: inherit
}

li, ul {
    list-style: none
}

.s2 {
    letter-spacing: 14px
}

.s3 {
    letter-spacing: 7px
}

.header-wrapper {
    height: 95px;
    background-color: #fff;
    padding: 52px 0 0;
    border-bottom: 1px solid #ebeef1;
    width: 100%
}

.dn > .header-wrapper.header-wrapper-fixed {
    position: fixed;
    z-index: 999;
    background: #0260ac;
    top: 0;
    box-shadow: 0 3px 5px #111
}

.wrapper.wrapper-marginTop {
    margin-top: 148px
}

.header {
    width: 1152px;
    margin: 0 auto;
    position: relative
}

.header > * {
    display: inline-block;
    vertical-align: top
}

.doodle {
    width: 220px;
    height: 90px;
    position: absolute;
    top: -22px;
    overflow: hidden
}

.doodle-default {
    width: 100%;
    height: 100%;
    background-image: url(//res.browser.qq.com/pcqb/navigate/assets/logo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50% 50%
}

.search-area {
    margin: 0 50px 0 220px;
    position: relative
}

.hotword {
    max-width: 660px;
    margin: 11px 0 0;
    height: 20px;
    position: relative
}

.hotword, .hotword a {
    overflow: hidden;
    line-height: 20px
}

.hotword a {
    display: inline-block;
    margin: 0 20px 0 0;
    white-space: nowrap;
    font-size: 14px;
    background-position: 0 50%;
    background-repeat: no-repeat
}

.hotword a:hover {
    color: hsla(0, 0%, 100%, .8)
}

.hotword-dropdown {
    position: absolute;
    top: 2px;
    right: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/dropdown_normal.png");
    background-repeat: no-repeat;
    background-size: 100%
}

.hotword-dropdown:hover {
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/dropdown.png")
}

.hotword-dropdown.up, .hotword-dropdown.up:hover {
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/dropup.png")
}

.hotword-hide {
    width: 625px;
    background-color: #fff;
    border: 1px solid #b4c8e5;
    position: absolute;
    padding: 15px 0 6px 33px;
    z-index: 10;
    top: 88px;
    display: none;
    font-size: 0
}

.hotword-hide a {
    display: inline-block;
    margin: 0 25px 9px 0;
    width: 78px;
    white-space: nowrap;
    overflow: hidden;
    line-height: 20px;
    font-size: 14px;
    padding: 0 0 0 22px;
    background-position: 0 50%;
    background-repeat: no-repeat
}

.hotword-hide a:hover {
    color: #08f
}

.weather {
    font-size: 12px;
    color: #000;
    position: relative;
    cursor: pointer;
    min-width: 150px
}

.weather > p {
    display: inline-block;
    margin: 7px 0;
    vertical-align: top
}

.weather .icon {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    display: none
}

.weather .air, .weather .city, .weather .pm {
    display: inline-block
}

.weather .air {
    margin: 0 5px
}

.weather .city {
    cursor: pointer
}

.weather .temp {
    display: block
}

.city-box {
    display: none;
    top: 46px;
    left: 42px;
    position: absolute;
    width: 262px;
    height: 324px;
    border: 1px solid hsla(0, 0%, 59%, .4);
    border-radius: 4px;
    background-color: #fff;
    color: #555;
    z-index: 10;
    font-size: 12px
}

.city-input {
    display: block;
    width: 220px;
    height: 30px;
    outline: none;
    margin: 11px auto;
    padding: 0 10px;
    border: 0 none;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .03)
}

.city-box h3 {
    padding-left: 15px;
    line-height: 28px;
    color: #9f9f9f
}

.city-box .location {
    display: inline-block;
    cursor: pointer;
    position: relative;
    height: 18px;
    margin-bottom: 8px;
    padding-left: 15px;
    font-size: 12px
}

.city-box img {
    width: 8px;
    height: 11px;
    margin-left: 5px;
    display: inline-block
}

.hot-list ul {
    margin-left: 15px;
    margin-right: -15px
}

.hot-list li {
    display: inline-block;
    cursor: pointer;
    width: 25%;
    line-height: 26px
}

.match-list {
    display: none;
    overflow-y: auto;
    height: 272px
}

.match-list-empty {
    line-height: 272px;
    text-align: center
}

.match-list li:hover {
    background: #00b4ff;
    color: #fff
}

.match-list li {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    padding-left: 21px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    font-size: 12px;
    color: rgba(0, 0, 0, .6)
}

.match-list li:hover em {
    color: #fff
}

.match-list em {
    color: #448aff
}

.wrapper {
    margin: 10px auto;
    width: 1152px
}

.wrapper a:hover {
    color: #08f
}

.government {
    height: 40px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .1);
    background-blend-mode: overlay;
    margin-bottom: 13px;
    color: #fff;
    line-height: 40px;
    overflow: hidden;
    font-size: 0
}

.government span {
    height: 20px;
    line-height: 20px;
    margin: 10px 20px 10px 31px;
    border-right: 1px solid hsla(0, 0%, 100%, .1);
    padding-right: 20px
}

.government a, .government span {
    font-size: 12px;
    display: inline-block
}

.government a {
    margin-right: 45px
}

.government a:last-child {
    margin-right: 0
}

.government a:hover {
    color: hsla(0, 0%, 100%, .8)
}

.content {
    position: relative
}

.wrapper .right {
    width: 334px;
    position: absolute;
    top: 0;
    right: 0;
    margin-bottom: 20px
}

.hr {
    margin: 10px auto;
    height: 1px;
    background-color: rgba(0, 0, 0, .05)
}

.wrapper .left {
    width: 810px
}

.left .gap {
    width: 100%;
    height: 6px;
    background-color: hsla(0, 0%, 100%, .7)
}

.hotsite {
    width: 808px;
    background-color: #fff;
    font-size: 0;
    padding: 21px 0;
    border-radius: 6px 6px 0 0;
    border: 1px solid hsla(0, 0%, 100%, .95)
}

.hotsite ul {
    margin-left: 30px
}

.hotsite li {
    vertical-align: top;
    display: inline-block;
    width: 107px;
    margin: 0 22.5px 15px 0
}

.hotsite .txt li {
    margin-top: 13px;
    margin-bottom: 0
}

.hotsite .dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: rgba(0, 0, 0, .9);
    border-radius: 2px;
    vertical-align: 8px;
    margin: 0 5px
}

.hotsite .hr {
    width: 748px
}

.hotsite a {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    background-repeat: no-repeat;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.hotsite .type1 a:first-child, .hotsite .type6 a:first-child, .hotsite .type7 a:first-child, .hotsite .type8 a:first-child {
    padding: 0 0 0 22px;
    background-position: 0 50%
}

.hotsite .type2 a, .hotsite .type6 a, .hotsite .type8 a {
    font-weight: 700
}

.hotsite .type3 a, .hotsite .type7 a, .hotsite .type8 a {
    position: relative;
    overflow: visible
}

.hotsite .type3 .dot, .hotsite .type7 .dot, .hotsite .type8 .dot {
    vertical-align: 2px
}

.hotsite .type3 a:last-child:after, .hotsite .type7 a:last-child:after, .hotsite .type8 a:last-child:after {
    content: "";
    width: 20px;
    height: 19px;
    background: url("//res.browser.qq.com/pcqb/navigate/assets/sale.png") no-repeat;
    position: absolute;
    right: -22px;
    top: -6px
}

.hotsite .type3 .s2:last-child:after, .hotsite .type7 .s2:last-child:after, .hotsite .type8 .s2:last-child:after {
    right: -10px
}

.hotsite .type3 .s3:last-child:after, .hotsite .type7 .s3:last-child:after, .hotsite .type8 .s3:last-child:after {
    right: -17px
}

.hotsite .type4, .hotsite .type5 {
    margin-right: 30.5px;
    margin-left: -8px
}

.hotsite .type4 a, .hotsite .type5 a {
    border-radius: 11px;
    padding: 0 24px 0 8px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-position: right 5px center
}

.hotsite .type4 a.s2, .hotsite .type5 a.s2 {
    padding: 0 10px 0 8px
}

.hotsite .type4 a.s3, .hotsite .type5 a.s3 {
    padding: 0 17px 0 8px
}

.hotsite .type4 a {
    border: 1px solid #ff3400;
    color: #ff3400;
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/hot.png")
}

.hotsite .type4 a:hover {
    background-color: #ff4700;
    color: #fff;
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/hot_hover.png")
}

.hotsite .type5 a {
    border: 1px solid #70c000;
    color: #70c000;
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/new.png")
}

.hotsite .type5 a:hover {
    background-color: #70c000;
    color: #fff;
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/new_hover.png")
}

.coolsite {
    font-size: 0;
    color: #000;
    padding: 6px 0 10px
}

.coolsite ul {
    position: relative;
    margin: 14px 0 0 53px
}

.coolsite li {
    display: inline-block;
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 21px 10px 0
}

.coolsite img {
    position: absolute;
    width: 18px;
    height: 18px;
    top: 1px;
    left: -33px
}

.coolsite .hr {
    width: 290px
}

.coolsite li a {
    display: inline-block;
    font-size: 14px;
    line-height: 20px
}

.coolsite .type1 {
    font-weight: 700
}

.right .hot {
    display: none
}

.right .top {
    width: 290px;
    border-top: 1px solid #ebeef1;
    padding: 20px 0;
    font-size: 0;
    margin: 0 auto;
    margin-bottom: 5px
}

.right .top h5 {
    font-size: 15px;
    line-height: 20px
}

.right .top ul {
    padding-top: 4px
}

.right .top li {
    margin-top: 12px;
    line-height: 20px
}

.right .top li > * {
    display: inline-block;
    font-size: 14px;
    vertical-align: top
}

.right .top .no {
    margin-right: 13px;
    width: 17px;
    text-align: center
}

.right .top li a {
    width: 200px;
    margin-right: 10px
}

.right .top .num, .right .top li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.right .top .num {
    width: 40px;
    font-size: 12px;
    color: rgba(0, 0, 0, .5);
    text-align: right
}

.right .top.hot .no, .right .top.hot a:hover, .right .top.hot h5 {
    color: #08f
}

.right .top.hot a {
    width: 240px
}

.right .top.weibo .no, .right .top.weibo a:hover, .right .top.weibo h5 {
    color: #ff9306
}

.right .top.baidu .no, .right .top.baidu a:hover, .right .top.baidu h5 {
    color: #ed3931
}

.feeds {
    width: 728px;
    padding: 0 40px;
    background-color: #fff;
    border-radius: 0 0 6px 6px;
    border: 1px solid hsla(0, 0%, 100%, .95)
}

.dn {
    background-attachment: fixed;
    background-size: contain;
    background-position: 50% 50%
}

.dn .header-wrapper {
    background-color: transparent;
    border-bottom: 1px solid transparent
}

.dn .air, .dn .city, .dn .hotword, .dn .pm, .dn .temp {
    color: #fff
}

.dn .doodle-default {
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/logo_dn.png")
}

.dn .hotword-dropdown {
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/dropdown_normal_dn.png")
}

.dn .hotword-dropdown:hover {
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/dropdown_dn.png")
}

.dn .hotword-dropdown.up, .dn .hotword-dropdown.up:hover {
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/dropup_dn.png")
}

.day {
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/day_cloud.png"), linear-gradient(180deg, #0260ac, #3992e0 36%, #9ce0fe 77%, #eff9fd)
}

.day, .night {
    background-size: auto, contain;
    background-repeat: no-repeat, repeat
}

.night {
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/night_star.png"), linear-gradient(180deg, #24e99a, #8af192 40%, #f0f4f5 80%)
}

#qb-bg {
    display: none;
    background-size: cover;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: 50% 50%
}

#aid, #qb-bg {
    position: fixed
}

#aid {
    bottom: 20px;
    right: 20px;
    right: calc(50% - 576px - 60px)
}

#aid a {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
    background-repeat: no-repeat;
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/aid.png");
    background-image: -webkit-image-set(url("//res.browser.qq.com/pcqb/navigate/assets/aid.png") 1x, url("//res.browser.qq.com/pcqb/navigate/assets/aid_2x.png") 2x);
    cursor: pointer
}

#aid .top {
    display: none;
    background-position: 0 0
}

#aid .top:hover {
    background-position: -40px 0
}

#aid .feedback {
    background-position: 0 -40px
}

#aid .feedback:hover {
    background-position: -40px -40px
}

#aid .shortcut {
    display: none;
    background-position: 0 -80px;
    position: relative
}

#aid .shortcut:hover {
    background-position: -40px -80px
}

#aid .shortcut-hide:before {
    position: absolute;
    content: "\5DF2\751F\6210\684C\9762\56FE\6807";
    text-align: center;
    width: 263px;
    height: 96px;
    line-height: 96px;
    background-image: url("//res.browser.qq.com/pcqb/navigate/assets/shortcut_tips.png");
    background-image: -webkit-image-set(url("//res.browser.qq.com/pcqb/navigate/assets/shortcut_tips.png") 1x, url("//res.browser.qq.com/pcqb/navigate/assets/shortcut_tips_2x.png") 2x);
    background-position: 0 50%;
    background-repeat: no-repeat;
    right: -6px;
    bottom: -28px;
    color: #000;
    animation: hide 0s ease-in 3s forwards;
    cursor: auto
}

@keyframes hide {
    to {
        visibility: hidden
    }
}

.category, .right-other, .wangyi , .xiongmao{
    border-radius: 6px;
    background-color: hsla(0, 0%, 100%, .95)
}

.category, .wangyi, .xiongmao {
    box-sizing: border-box;
    padding: 10px 5px 10px 4px;
    font-size: 0;
    margin-bottom: 5px
}

.category .tab {
    box-sizing: border-box;
    display: inline-block;
    width: 65px;
    height: 65px;
    padding-top: 33px;
    border-radius: 6px;
    margin: 0;
    background-position: 50% 10px;
    background-repeat: no-repeat
}

.category .tab:nth-child(5n) {
    margin-right: 0
}

.category .tab:hover {
    background-color: rgba(0, 0, 0, .05)
}

.category .tab:active {
    background-color: rgba(0, 0, 0, .08)
}

.category .tab span {
    display: block;
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center
}

.ad-banner {
    overflow: hidden
}

.right .ad-banner {
    border-radius: 6px;
    margin-bottom: 5px;
    display: none
}

.banner_static_backup {
    border-radius: 6px;
    margin-bottom: 5px;
    overflow: hidden
}

.game {
    box-sizing: border-box;
    padding: 0 31px 0 30px;
    background: #fff
}

.game, .hotgame {
    overflow: hidden
}

.hotgame {
    margin: 16px 0
}

.hotgame img {
    width: 25px;
    height: 25px;
    margin-top: 4px;
    vertical-align: top
}

.hotgame span {
    vertical-align: top;
    display: inline-block;
    font-size: 22px;
    margin-left: 13px;
    height: 30px;
    line-height: 30px;
    font-weight: 700;
    color: #1b2332
}

.pic3-game {
    border-radius: 4px;
    overflow: hidden
}

.pic3-game .pic {
    float: left
}

.pic3-game .pic-big {
    overflow: hidden;
    width: 477px;
    height: 266px
}

.pic3-game .pic-small {
    overflow: hidden;
    width: 272px;
    height: 133px
}

.gameinfo {
    margin-top: 29px;
    font-size: 0;
    position: relative
}

.gameinfo img {
    width: 17px;
    height: 15px;
    object-fit: contain;
    margin-top: 4px;
    vertical-align: top
}

.gameinfo span {
    vertical-align: top;
    display: inline-block;
    font-size: 16px;
    margin-left: 7px;
    height: 22px;
    line-height: 22px;
    font-weight: 700;
    color: #000
}

.gameinfo .refresh-icon {
    width: 15px;
    height: 14px;
    margin-top: 3px
}

.gameinfo .refresh-block {
    font-style: normal;
    cursor: pointer;
    float: right;
    color: #ce54ff;
    margin-top: 4px
}

.gameinfo .refresh {
    width: 42px;
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #0076ff
}

.gameinfo-wrapper {
    margin-top: 11px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start
}

.gameinfo-wrapper .info-item {
    flex: 0 1 236px;
    width: 236px;
    margin-right: 20px;
    margin-bottom: 30px
}

.gameinfo-wrapper .info-item:nth-child(3), .gameinfo-wrapper .info-item:nth-child(6) {
    margin-right: 0
}

.gameinfo-wrapper .info-item .info-pic:hover {
    opacity: .8
}

.gameinfo-wrapper .info-item .info-pic {
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    height: 137px
}

.multi-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.gameinfo-wrapper .info-item .info-msg {
    margin-top: 12px;
    height: 40px;
    font-size: 14px;
    color: #000;
    line-height: 20px
}

.info-conf {
    margin-top: 6px;
    position: relative
}

.info-conf span {
    display: inline-block;
    line-height: 17px;
    font-size: 12px;
    color: #999
}

.morething {
    padding-top: 5px;
    height: 60px;
    background: #fff;
    text-align: center;
    position: relative
}

.morething span {
    vertical-align: top;
    display: inline-block
}

.morething .all-game {
    font-size: 14px;
    line-height: 17px;
    font-weight: 400;
    color: #0076ff
}

.morething .right-icon {
    width: 5px;
    height: 8px;
    background-repeat: no-repeat;
    margin-top: 6px
}

.live {
    box-sizing: border-box;
    padding: 0 31px 0 30px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 6.8px
}

.live .beautyshow {
    overflow: hidden;
    margin: 18.2px 0 13px
}

.live .beautyshow img {
    margin-top: -.8px;
    vertical-align: top;
    width: 39px;
    height: 30px;
    object-fit: contain
}

.live .beautyshow span {
    vertical-align: top;
    display: inline-block;
    font-size: 22px;
    margin-left: 8px;
    height: 30px;
    line-height: 30px;
    font-weight: 700;
    color: #000
}

.pic5-live {
    border-radius: 4px;
    overflow: hidden
}

.pic5-live .pic {
    position: relative;
    float: left;
    font-size: 14px
}

.pic5-live .pic-big {
    overflow: hidden;
    width: 308px;
    height: 440px
}

.pic5-live .pic-small {
    width: 220px;
    height: 220px;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff
}

.pic-small .show_label {
    color: #fff;
    float: right;
    margin-right: 8px;
    margin-top: 8px;
    border-radius: 8.5px;
    padding: 2px 10px;
    background-color: #e92053
}

.pic-small-wrap {
    z-index: 4;
    position: absolute;
    width: 100%;
    bottom: 10px
}

.pic-small .anchor_nickname {
    margin-left: 9px;
    width: 135px;
    float: left
}

.pic-small .watch_count {
    float: right;
    margin-right: 10px;
    font-size: 0
}

.pic-small .watch_count .show-eye {
    display: inline-block;
    margin-top: 1px;
    width: 15px;
    height: 9px;
    vertical-align: middle;
    margin-right: 4px
}

.pic-small .watch_count .watch_count_txt {
    font-size: 12px;
    vertical-align: middle
}

.moreliver {
    margin-top: 21px;
    position: relative
}

.moreliver img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-top: 2px;
    vertical-align: top
}

.moreliver span {
    vertical-align: top;
    margin-left: 1px;
    width: 60px;
    line-height: 21px;
    font-size: 15px;
    font-weight: 700;
    color: #000
}

.moreliver .go-live {
    position: absolute;
    right: 13px;
    top: 4px;
    width: 48px;
    display: inline-block;
    font-size: 12px;
    line-height: 17px;
    font-weight: 400;
    color: #fd3775
}

.moreliver .right-icon {
    width: 5px;
    height: 8px;
    background-repeat: no-repeat;
    position: absolute;
    top: 10px;
    right: 4px
}

.liver-list, .liver-list:last-of-type {
    display: flex;
    justify-content: space-between;
    margin-top: 10px
}

.liver-list:last-of-type {
    margin-bottom: 30.8px
}

.liver-list .liver-item {
    font-size: 0
}

.liver-list .liver-item > a {
    overflow: hidden;
    position: relative;
    display: inline-block
}

.liver-list .liver-item a:hover .avatar-shade {
    display: block
}

.liver-list .liver-item .avatar {
    width: 172px;
    height: 172px;
    background-size: 100% 100%;
    border-radius: 4px;
    position: relative
}

.liver-list .liver-item .avatar-shade {
    display: none;
    position: absolute;
    width: 172px;
    height: 172px;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
    background-repeat: no-repeat;
    background-position: 50%
}

.liver-list .liver-item .avatar .sign {
    position: absolute;
    right: 8px;
    top: 8px;
    height: 15px;
    border-radius: 8.5px;
    font-size: 0;
    background-image: linear-gradient(270deg, #fa3881, #f41a1a)
}

.liver-list .liver-item .avatar .sign span {
    display: inline-block;
    font-size: 10px;
    padding: 0 6px 0 7px;
    height: 14px;
    line-height: 14px;
    color: #fff;
    font-weight: 700
}

.liver-list .liver-item .liver-detail {
    margin-top: 10px;
    position: relative
}

.liver-list .liver-item .liver-detail .title {
    display: inline-block;
    width: 100px;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #000
}

.liver-list .liver-item .liver-detail .watch_count {
    float: right;
    margin-top: 1px;
    margin-right: 10px;
    font-size: 0
}

.liver-list .liver-item .liver-detail .eye {
    display: inline-block;
    margin-top: 1px;
    width: 15px;
    height: 9px;
    vertical-align: middle;
    margin-right: 4px
}

.liver-list .liver-item .liver-detail .watch_count_txt {
    vertical-align: middle;
    font-size: 12px;
    color: #999
}

.right .rank-wrapper {
    width: 334px;
    border-radius: 6px;
    background: #fff
}

.right .rank-wrapper .title {
    height: 42px;
    line-height: 42px;
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    font-weight: 700
}

.right .rank-wrapper .title .common-t {
    cursor: pointer
}

.right .rank-wrapper .title .selected-t {
    color: #666
}

.right .rank-wrapper .common-rank {
    margin-top: 19px;
    padding-bottom: 16px
}

.right .rank-wrapper .common-rank ul li {
    margin-bottom: 24px;
    font-size: 0
}

.right .rank-wrapper .common-rank ul li .no {
    vertical-align: top;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #000;
    font-weight: 400;
    width: 50px;
    text-align: center
}

.right .rank-wrapper .common-rank ul li:first-of-type .no {
    color: red
}

.right .rank-wrapper .common-rank ul li:nth-of-type(2) .no {
    color: #f18634
}

.right .rank-wrapper .common-rank ul li:nth-of-type(3) .no {
    color: #ffba5a
}

.right .rank-wrapper .common-rank ul li .avatar {
    display: inline-block;
    width: 50px;
    height: 50px
}

.right .rank-wrapper .common-rank ul li .detail {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    position: relative;
    width: 215px
}

.right .rank-wrapper .common-rank ul li .detail .name {
    width: 120px;
    font-size: 14px;
    color: #000
}

.right .rank-wrapper .common-rank ul li .detail span:nth-of-type(2) {
    width: 100px;
    height: 17px;
    font-size: 12px;
    text-align: right;
    position: absolute;
    right: 20px;
    bottom: 3px;
    color: #999
}

.right .rank-wrapper .game-rank ul li .avatar {
    background-size: 100% 100%;
    border-radius: 8px
}

.right .rank-wrapper .game-rank ul li .detail span:first-of-type {
    display: inline-block;
    margin-top: 9px;
    font-size: 12px;
    text-align: center;
    line-height: 19px;
    padding: 0 12px;
    height: 20px;
    border-radius: 4px
}

.right .rank-wrapper .beauty-rank ul li .avatar {
    background-size: 100% 100%;
    border-radius: 50%
}

.right .rank-wrapper .beauty-rank ul li .detail span:first-of-type {
    display: inline-block;
    margin-top: 9px;
    font-size: 12px;
    text-align: center;
    line-height: 19px;
    width: 60px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid #24e99a;
    color: #24e99a
}

.single-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.hot_game_big-default {
    width: 477px;
    height: 266px
}

.hot_game_small1-default, .hot_game_small2-default {
    width: 272px;
    height: 133px
}

.bk_game, .bk_game-small, .bk_live {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    position: relative
}

.bk_game .title {
    position: absolute;
    font-size: 24px;
    color: #fff;
    left: 18px;
    bottom: 13px
}

.bk_game-small .title {
    position: absolute;
    font-size: 16px;
    color: #fff;
    left: 10px;
    bottom: 10px
}

.bk_game-small .title:hover, .bk_game .title:hover {
    color: #08f
}

.live_header-default {
    width: 308px;
    height: 440px
}

.rank-wrapper-fixed {
    z-index: 5;
    top: 0
}

.bk_game-small .shade, .bk_game .shade {
    position: absolute;
    z-index: 3;
    width: 477px;
    height: 266px;
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), rgba(0, 0, 0, .2))
}

.bk_game-small .shade {
    width: 272px;
    height: 133px
}

.pic5-live .pic-big .shade, .pic5-live .pic-small .shade {
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), rgba(0, 0, 0, .3));
    position: absolute;
    background-repeat: no-repeat;
    background-position: 50%;
    z-index: 3;
    width: 308px;
    height: 440px
}

.pic5-live .pic-big .shade:hover, .pic5-live .pic-small .shade:hover {
    background-image: url("http://stdl.qq.com/stdl/qb/assets/navigate/asset/img/bofang.png"), linear-gradient(180deg, hsla(0, 0%, 100%, 0), rgba(0, 0, 0, .8))
}

.pic5-live .pic-small .shade {
    width: 220px;
    height: 220px
}

.adsite {
    display: flex;
    background-color: #fff
}

.adsite-item {
    box-sizing: border-box;
    position: relative
}

.adsite-item:after {
    content: "";
    position: absolute;
    right: 0;
    width: 2px;
    height: 44%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f2f2f2
}

.adsite-item:last-child:after {
    content: "";
    position: absolute;
    width: 0
}

.adsite-item img {
    width: 100%
}

.fixed-ad {
    position: fixed;
    width: 66px;
    top: 313px;
    left: 50%;
    margin-left: 585px;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff
}

.fixed-ad a {
    display: block;
    text-align: center;
    border-bottom: 2px solid #f2f2f2
}

.fixed-ad a:first-child, .fixed-ad a:last-child {
    border-bottom: 0
}

.fixed-ad a img {
    width: 100%
}

.fixed-ad a p {
    line-height: 33px;
    font-size: 12px;
    color: #242424;
    font-family: arial, helvetica, sans-serif
}

.screen-ad-container {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    display: none
}

.screen-ad-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center
}

.screen-ad-inner a {
    display: block
}

.screen-ad-inner a img {
    width: 100%;
    height: 100%
}

.screen-ad-inner .ad-tip {
    position: absolute;
    left: 30px;
    bottom: 70px
}

.screen-ad-inner .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    width: 42px;
    height: 42px
}

.feed-tabs-container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.feed-tab-item {
    width: 10%;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    cursor: pointer
}

.feed-tab-item[data-actived=true] {
    color: #388ce6;
    border-bottom: 1px solid #388ce6
}

.feed-wrapper {
    background-color: #fff;
    padding: 0 25px
}

.feed-item {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid #f3f3f3;
    overflow: hidden
}

.feed-title-no-pic, .feed-title-one-pic, .feed-title-three-pic {
    font-size: 19px;
    line-height: 28px;
    cursor: pointer
}

.three-pic {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.feed-one-pic {
    width: 224px;
    height: 134px;
    float: left;
    background-size: cover;
    overflow: hidden;
    margin-right: 20px
}

.three-pic > div {
    height: 136px;
    width: calc(33% - 1px);
    background-position: 50%;
    background-size: cover
}

.feed-subtitle-no-pic, .feed-subtitle-one-pic, .feed-subtitle-three-pic {
    line-height: 20px;
    margin-top: 10px;
    font-size: 12px;
    color: #999
}

.feed-one-pic-text {
    height: 134px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.feed-more {
    padding: 10px 0;
    text-align: center;
    font-size: 15px;
    color: #999
}

#personal {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 440px;
    padding-top: 56px;
    background-color: rgba(40, 40, 40, .95);
    font-size: 12px;
    transition: right .5s ease;
    z-index: 10
}

#personal a {
    text-decoration: none;
    outline: 0 none
}

#personal ::-webkit-scrollbar {
    width: 0
}

#personal.on {
    right: 0
}

#personal.on .menu {
    right: 20px
}

#personal.on .menu a:not(.btn-option) {
    display: none
}

#personal.on .btn-option {
    border-left: 1px solid transparent
}

#personal.off {
    right: -440px
}

#personal.off .menu {
    right: 460px
}

#personal.process .menu a {
    display: none
}

#personal .menu {
    display: flex;
    position: absolute;
    top: 20px
}

#personal .menu a:not(.btn-option) {
    margin-right: 15px;
    width: 19px;
    height: 20px;
    background-image: url(https://stdl.qq.com/stdl/qb/assets/navigate/img/option_btn.png)
}

#personal .btn-quick-access {
    padding-left: 15px;
    background-clip: content-box;
    background-position: -51px 0
}

#personal .btn-favorite-tab {
    background-position: -145px 0
}

#personal .btn-search-tab {
    background-position: -207px 0
}

#personal .btn-quick-access.active {
    background-position: 9px 0
}

#personal .btn-favorite-tab.active {
    background-position: -85px 0
}

#personal .btn-search-tab.active {
    background-position: -167px 0
}

[data-qblight=true] #personal .btn-quick-access {
    background-position: -31px 0
}

[data-qblight=true] #personal .btn-favorite-tab {
    background-position: -125px 0
}

[data-qblight=true] #personal .btn-search-tab {
    opacity: .5;
    background-position: -187px 0
}

[data-qblight=true] #personal .btn-quick-access.active {
    background-position: -11px 0
}

[data-qblight=true] #personal .btn-favorite-tab.active {
    background-position: -105px 0
}

[data-qblight=true] #personal .btn-search-tab.active {
    opacity: 1;
    background-position: -187px 0
}

#personal .btn-option {
    font-size: 14px;
    border-left: 1px solid rgba(0, 0, 0, .2);
    color: #5a5a5a;
    padding-left: 15px;
    width: 50px
}

#personal.on .btn-option:after {
    content: "\5173\95ED";
    color: #fff
}

#personal.off .btn-option:after {
    content: "\4E2A\6027\5316"
}

.dn #personal .btn-option, [data-qblight=true] #personal .btn-option {
    color: #fff
}

.dn #personal .btn-quick-access {
    background-position: -31px 0
}

.dn #personal .btn-favorite-tab {
    background-position: -125px 0
}

.dn #personal .btn-search-tab {
    opacity: .5;
    background-position: -187px 0
}

.dn #personal .btn-quick-access.active {
    background-position: -11px 0
}

.dn #personal .btn-favorite-tab.active {
    background-position: -105px 0
}

.dn #personal .btn-search-tab.active {
    opacity: 1;
    background-position: -187px 0
}

#personal .list {
    position: absolute;
    top: 56px;
    bottom: 0;
    width: 440px;
    padding: 0 44px;
    box-sizing: border-box;
    overflow-y: auto
}

.skin-title {
    margin: 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .4);
    height: 32px;
    min-height: 24px;
    line-height: 32px;
    color: hsla(0, 0%, 100%, .4);
    margin-top: 10px
}

.reset-skin {
    float: right;
    margin-right: 9px;
    color: #fff;
    cursor: pointer
}

.skin-tab {
    margin-top: 20px
}

.skin-tab-head {
    overflow: hidden;
    cursor: pointer;
    margin-right: -14px;
    color: #fff;
    font-size: 14px;
    line-height: 26px
}

.skin-tab-head .group-item {
    float: left;
    margin-right: 14px;
    color: #fff
}

.skin-tab-head .active {
    color: #08f
}

.skin-tab-head .more-skin {
    float: left;
    margin-right: 14px;
    color: hsla(0, 0%, 100%, .4)
}

.skin-tab-body {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
    margin-left: -6px;
    margin-bottom: 30px
}

.skin-item {
    position: relative;
    cursor: pointer;
    width: 172px;
    height: 130px;
    margin-left: 6px;
    margin-top: 6px;
    border-radius: 4px
}

.skin-item, .skin-tab-body .active:after {
    background-size: cover;
    background-repeat: no-repeat
}

.skin-tab-body .active:after {
    position: absolute;
    content: "";
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    background-image: url(https://stdl.qq.com/stdl/qb/assets/navigate/img/used_qb10.png)
}

.section-links {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
}